<!DOCTYPE html>
<!-- saved from url=(0040)http://www.css3train.com/chuangyi/1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>1</title>	<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="generator" content="Editplus ">
<meta name="author" content="Author：走起来,QQ群：197326136">
<meta name="robots" content="ALL">
<meta name="copyright" content="走起来-css3实例站"> 
<style>
body{padding:0;margin:0;}
.texiaoqu{
	margin:150px 0 0 40px;
	position: relative;
}
span{
	color:#3e68ad;
	position:absolute;
	font-weight:bold;
	font-family:"Arial Rounded MT Bold";
	font-size:50px;
}
.wordB{
	top:0px;
	-webkit-animation:b .5s linear;
}
.wordAI{
	left:35px;
	color:#d54433;
}
.wordD{
	left:83px;
	-webkit-animation:d .3s linear 1s,dk .9s linear 1.3s,d1 0.1s linear 2.2s,d1k 0.2s linear 2.3s,d2 0.3s linear 2.5s;
	_-webkit-animation-fill-mode:forwards;/* 不能反向 */
}
.wordU{
	left:113px;
	-webkit-animation:u .3s linear 1s,u1 1s linear 1.3s,uk .2s linear 2.2s,u2 0.6s linear 2.4s;
	_-webkit-animation-fill-mode:forwards;/* 不能反向 */
}
.qiu{
	width:26px;
	height:26px;
	display:block;
	position:absolute;
	top: -15px;
	left:3px;
	background:url('zuqiu.png') no-repeat;
	-webkit-animation:qiu .5s .5s,qiu2 .5s linear 0.8s,qiu2k 1.1s linear 1.3s,qiu3 .5s linear 2.4s;
	_-webkit-animation-fill-mode:forwards;/* 不能反向 */
	_-webkit-animation-iteration-count:infinite;
	
}
.blgebo,.brgebo,.btlgebo{
	display:block;
	position: absolute;
	border-left: 2px solid #000;
	width: 20px;
	height: 18px;
	border-radius: 20px;
	left: -4px;
	top: 29px;
	-webkit-transform: rotate(29deg);
}
.brgebo{
	border-left:0;
	border-right: 2px solid #000;
	left: 15px;
	-webkit-transform: rotate(-29deg);
}
.btlgebo{
	border-radius:0;
	border-right: 3px solid #000;
	border-left: 3px solid #000;
	-webkit-transform:none;
	width:8px;
	height:8px;
	top: 47px;
	left: 10px;
	-webkit-animation:btui .5s linear;
}
.eye1,.eye2,.mouse{
	width:12px;
	height:15px;
	border:1px solid #000;
	position:absolute;
	border-radius: 10px;
	left: 45px;
	top: 11px;
	background: white;
	opacity:0;
}
.eye1,.eye2{
	-webkit-animation:eye .8s linear 1.5s,han1 1.3s linear 1.5s;
}
.eye2{
	left:63px;
}
.eyeblack1{
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: #000;
	display: block;
	margin: 7px 0 0 3px;
	-webkit-animation:eyeblack1 .8s linear 1.5s,eyeblack2 .2s linear 2.3s,han1 .5s linear 2.5s;
	-webkit-animation-fill-mode:forwards;/* 不能反向 */
}
.mouse{
	width:8px;
	height:12px;
	left: 56px;
	top: 31px;
	-webkit-animation:mouse .8s linear 1.5s,han1 .5s linear 2.3s;
}
.han1,.han2,.han3{
	border-right:1px solid #222;
	position:absolute;
	opacity:0;
	height: 8px;
	-webkit-transform: translate(80px,10px);
	-webkit-animation:han1 .5s linear 2.3s;
	_-webkit-animation-fill-mode:forwards;/* 不能反向 */
}
.han2{
	height:9px;
	-webkit-transform: translate(82px,10px);
}
.han3{
	height:10px;
	-webkit-transform: translate(84px,10px);
}
@-webkit-keyframes btui{
	0%{border-radius:0px;}
	100%{border-radius:5px 5px 0 0;}
}
@-webkit-keyframes b{
	0%{top:0;}
	100%{top:3px;}
}
@-webkit-keyframes qiu{
	0%{background-size:26px;}
	100%{background-size:26px 24px;}
}
@-webkit-keyframes qiu2{
	0%{left:3px;-webkit-transform:rotate(30deg);}
	25%{left:60px;top:-30px;-webkit-transform:rotate(90deg);}
	50%{left:120px;top:-40px;-webkit-transform:rotate(180deg);}
	75%{left:180px;top:-30px;-webkit-transform:rotate(270deg);}
	100%{left:240px;-webkit-transform:rotate(360deg);}
}@-webkit-keyframes qiu2k{
	0%{left:240px;-webkit-transform:rotate(360deg);}
	100%{left:240px;-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes qiu3{
	0%{left:240px;-webkit-transform:rotate(-30deg);}
	25%{left:180px;top:-30px;-webkit-transform:rotate(-90deg);}
	50%{left:120px;top:-40px;-webkit-transform:rotate(180deg);}
	75%{left:60px;top:-30px;-webkit-transform:rotate(270deg);}
	100%{left:3px;-webkit-transform:rotate(-360deg);}
}
@-webkit-keyframes d{
	0%{}
	100%{left:230px;}
}
@-webkit-keyframes dk{
	0%{left:230px;}
	100%{left:230px;}
}
@-webkit-keyframes d1{
	0%{left:230px;}
	100%{left:230px;top: -3px;}
}@-webkit-keyframes d1k{
	0%{left:230px;top: -3px;}
	100%{left:230px;top: -3px;}
}
@-webkit-keyframes d2{
	0%{left:230px;}
	100%{top:0;}
}
@-webkit-keyframes u{
	0%{}
	100%{left:260px;}
}
@-webkit-keyframes u1{
	0%{left:260px;}
	25%{-webkit-transform:translate(0px,-3px) rotate(-3deg)}
	50%{-webkit-transform:translate(0,-10px) rotate(-19deg)}
	75%{-webkit-transform:translate(0,-16px) rotate(-35deg)}
	100%{left:260px;-webkit-transform:translate(0,-23px) rotate(-50deg)}
}
@-webkit-keyframes uk{
	0%{left:260px;-webkit-transform:translate(0,-23px) rotate(-50deg)}
	100%{left:260px;-webkit-transform:translate(0,-23px) rotate(-50deg)}
}
@-webkit-keyframes u2{
	0%{left:260px;-webkit-transform:none;}
	100%{}
}
@-webkit-keyframes eye{
	0%{opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes eyeblack1{
	0%{}
	100%{margin:4px;}
}
@-webkit-keyframes eyeblack2{
	0%{background:#eaeaea;margin:4px 0 0 3px;}
	10%{background:#eaeaea;margin:4px 0 0 3px;}
	100%{background:#eaeaea;margin:4px 0 0 3px;}
}
@-webkit-keyframes mouse{
	0%{-webkit-transform:scale(0.5);-webkit-transform-origin: center;opacity: 1;}
	100%{-webkit-transform-origin: center;opacity: 1;}
}
@-webkit-keyframes han1{
	0%{opacity: 1;}
	100%{opacity: 1;}
}
@font-face {
	font-family:'Arial Rounded MT Bold'; src: url('http://www.css3train.com/ArialR.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

</style>
</head>
<body>
<div class="texiaoqu">
	<span class="wordB">B</span>
	<span class="wordAI">ai</span>
	<span class="wordD">d</span>
	<span class="wordU">u</span>
	<span class="qiu"></span>
	<!-- B腿胳膊 -->
	<i class="blgebo"></i>
	<i class="brgebo"></i>
	<i class="btlgebo"></i>
	<!-- 眼睛 -->
	<i class="eye1"><i class="eyeblack1"></i></i>
	<i class="eye2"><i class="eyeblack1"></i></i>
	<i class="mouse"></i>
	<i class="han1"></i>
	<i class="han2"></i>
	<i class="han3"></i>
</div>
<br><br><br><br><br><br>
<div style="line-height:24px;padding-left:10px;">
目前效果只是一个简单的demo，应用技术是css3，demo涉及到兼容，请用chrome观看<br>
B颠两次球，顶出球，d和u开始追求，因为u的个头比d小，所以球快落地时，u要快速的跳起顶球，在u快顶到球时，d轻松顶到球<br>
在跳起期间ai做出惊讶和期待的表情（u跳起的期间其实是个慢镜头的过程），d瞬间顶到球，ai瞬间惊呆<br>
球返程，d和u向回跑<br>
循环效果
</div>
<!--<div id="btn">开始</div>
<script type="text/javascript">
	var btn = document.getElementById('btn');
	btn.onclick = function(){
		
	}
</script>-->


</body></html>